<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link rel="stylesheet" href="css/music.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css?t=111222" type="text/css" />
	</head>
	<body>

        <div class="pop-bg-share" id="popShare">
            <div class="pop-box-share"><img src="images/share.png" alt="" /></div>
        </div>

        <div class="pop-bg">
            <div class="pop-game-count"><img src="images/game_count_three_img.png" width="100%" alt="" /></div>

            <div class="pop-jump-tips"><img src="images/pop_jump_img.png" width="100%" alt="" /></div>

            <div class="pop-box pop-game-over" id="gameOver">
                <div class="pop-box-title" style="margin-top: .4rem;">游戏结束</div>
                <div class="pop-box-content game-over-content">
                    <h1>本轮收获</h1>
                    <p>获得奖励可在我的好礼中查看</p>
                </div>
                <div class="game-over-score-box flex">
                    <div class="game-over-score-item flex">
                        <img src="images/score_icon.png" alt="" />
                        <p>骨力x<span id="popScoreShow">183605</span></p>
                    </div>
                    <div class="game-over-score-item flex">
                        <img src="images/gold_icon.png" alt="" />
                        <p>益固金币x<span id="popGoldShow">3684</span></p>
                    </div>
                    <div class="game-over-score-item flex">
                        <img src="images/lock_icon.png" alt="" />
                        <p>福锁x<span id="popLockShow">2</span></p>
                        <img class="pop-lock-tips" src="images/pop_lock_tips.png" alt="" />
                    </div>
                    <div class="game-over-score-item flex">
                        <img src="images/redbag_icon.png" alt="" />
                        <p>红包x<span id="popRedbagShow">1</span></p>
                        <img class="pop-redbag-tips" src="images/pop_redbag_tips.png" alt="" />
                    </div>
                </div>
                <div class="game-over-btn-box">
                    <div class="game-replay-btn-big"></div>
                    <div class="pop-btn-box flex" style="width: 8.04rem">
                        <div class="game-replay-btn"></div>
                        <div class="share-to-revive-btn">
                            <img src="images/revive_times_two.png" alt="" />
<!--                            <img src="images/revive_times_one.png" alt="" />-->
                        </div>
                    </div>
                    <div class="pop-btn-box flex" style="width: 8.04rem">
                        <div class="my-rank-btn"></div>
                        <div class="my-gift-btn"></div>
                    </div>
                </div>
            </div>

            <div class="pop-box-game-over animated fadeOutDown">游戏结束。。。</div>

            <div class="pop-box" id="gameRule">
                <div class="pop-box-title">游戏玩法</div>
                <div class="pop-box-content game-rule-content" style="max-height: 10rem;">
                    <img class="game-rule" src="images/game_rule_img.png" width="100%" alt="" />
                </div>
                <div class="game-start-btn" style="margin-top: .5rem;"></div>
            </div>
        </div>

        <div class="page game">
            <img class="game-top-tree" src="images/game_top_tree.png" alt="" />
            <img class="game-logo" src="images/game_logo.png" alt="" />
            <div class="game-score-show-box flex">
                <div class="game-score-show-item flex" id="lockShow">
                    <img src="images/lock_icon.png" alt="" />
                    <p>x<span>0</span></p>
                </div>
                <div class="game-score-show-item flex" id="scoreShow">
                    <img src="images/score_icon.png" alt="" />
                    <p>x<span>0</span></p>
                </div>
                <div class="game-score-show-item flex" id="redbagShow">
                    <img src="images/redbag_icon.png" alt="" />
                    <p>x<span>0</span></p>
                </div>
                <div class="game-score-show-item flex" id="goldShow">
                    <img src="images/gold_icon.png" alt="" />
                    <p>x<span>0</span></p>
                </div>
            </div>

            <img class="game-lock-tips animated slideOutLeft" src="images/game_lock_tips.png" alt="" />
            <img class="game-redbag-tips animated slideOutLeft" src="images/game_redbag_tips.png" alt="" />

            <div class="game-info-box lock animated slideOutLeft" id="lockInfo"><span>用户昵称昵称：</span>刚刚获得一把福锁</div>
            <div class="game-info-box red animated slideOutLeft" id="redInfo"><span>用户昵称昵称：</span>刚刚获得现金红包</div>

            <div class="game-tips-box animated fadeOutUp slow" id="tipsLock"><img src="images/get_item_img_lock.png" width="100%" alt="" /></div>
            <div class="game-tips-box animated fadeOutUp slow" id="tipsRed"><img src="images/get_item_img_redbag.png" width="100%" alt="" /></div>

            <!-- 背景start -->
            <div id="background">
<!--                <div class="far-cloud animated infinite slideOutLeft1 slowest paused">-->
<!--                    <img src="images/game_far_cloud.png" alt="" />-->
<!--                    <img src="images/game_far_cloud.png" alt="" />-->
<!--                </div>-->
<!--                <div class="cloud animated infinite slideOutLeft1 slower paused">-->
<!--                    <img src="images/game_cloud.png" alt="" />-->
<!--                    <img src="images/game_cloud.png" alt="" />-->
<!--                </div>-->
                <div class="ground animated infinite slideOutLeft1 slower1 paused">
                    <img src="images/game_bg1.png" alt="" />
                    <img src="images/game_bg1.png" alt="" />
                </div>
                <div class="game-round-meadow animated infinite slideOutLeft1 slow1 paused">
                    <img src="images/meadow_img.png" alt="" />
                    <img src="images/meadow_img.png" alt="" />
                </div>

                <div class="game-move-box flex">
                    <div class="game-move-round-box animated roundMove slow11 paused" id="initial">
                        <div class="game-move-round-box-area flex">
                            <div class="game-move-round" style="width: 100vw; height: 1rem;"><div class="game-move-meadow"></div></div>
                            <div class="game-move-round empty"></div>
                        </div>
                    </div>
                    <div class="game-move-round-box flex long" id="0">
                        <div class="game-chunk-box flex" style="left: 5%;">
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                        </div>
                        <div class="game-chunk-box flex" style="left: 23%;">
                            <div class="game-item buff ca-vd"></div>
                            <div class="game-icon-chunk"></div>
                            <div class="game-icon-chunk"></div>
                            <div class="game-icon-chunk"></div>
                            <div class="game-icon-chunk"></div>
                        </div>
                        <div class="game-chunk-box flex" style="left: 35%;">
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                        </div>
                        <div class="game-chunk-box flex" style="left: 60%;">
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                        </div>
                        <div class="game-chunk-box flex" style="left: 80%;">
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                            <div class="game-icon-chunk"><div class="game-item gold"></div></div>
                        </div>
                        <div class="game-move-round-box-area area1 flex">
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                    <div class="game-item gold" style="left: 5rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round empty"></div>
                        </div>
                        <div class="game-move-round-box-area area2 flex">
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                    <div class="game-item gold" style="left: 5rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round empty"></div>
                        </div>
                        <div class="game-move-round-box-area area3 flex">
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                    <div class="game-item gold" style="left: 5rem"></div>
                                    <div class="game-item gold" style="left: 6rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round empty"></div>
                        </div>
                        <div class="game-move-round-box-area area4 flex">
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item wall deadly" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                    <div class="game-item gold" style="left: 5rem"></div>
                                    <div class="game-item gold" style="left: 6rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item bang deadly" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round empty"></div>
                        </div>
                        <div class="game-move-round-box-area area5 flex">
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item flower deadly" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                    <div class="game-item gold" style="left: 5rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round">
                                <div class="game-item-box flex">
                                    <div class="game-item gold" style="left: 1rem"></div>
                                    <div class="game-item gold" style="left: 2rem"></div>
                                    <div class="game-item gold" style="left: 3rem"></div>
                                    <div class="game-item gold" style="left: 4rem"></div>
                                    <div class="game-item gold" style="left: 5rem"></div>
                                    <div class="game-item gold" style="left: 6rem"></div>
                                </div>
                                <div class="game-move-meadow"></div>
                            </div>
                            <div class="game-move-round empty"></div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 背景end -->

            <div class="person" id="person"></div>
            <div class="jump-button" id="jump"></div>

            <div class="gold"></div>
        </div>

        <script language="javascript" type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script language="javascript" type="text/javascript" src="js/howler.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/music.js"></script>

        <script type="text/javascript">
            $('.pop-jump-tips').bind('touchend',function (e) {
                $('.pop-bg').removeClass('show');
                $('.pop-jump-tips').hide();
                $('#background').find('.animated').removeClass('paused');
                gameOverConfirm = false;
                $('#person').addClass('run');
                tick();
            });

            $('.share-to-revive-btn').bind('touchend',function (e) {
                //$('.pop-bg-share').addClass('show');

                /******** 判断分享之后 ********/
                $('.pop-bg-share').removeClass('show');
                $('.pop-box').hide();
                gameStartNum = 3;
                $('.pop-game-count').find('img').attr('src','images/game_count_three_img.png');
                $('.pop-game-count').show();
                gameStartRound = setInterval(function () {
                    if (gameStartNum == 0){
                        clearInterval(gameStartRound);
                        $('.pop-bg-share').removeClass('show');
                        $('.pop-bg').removeClass('show');
                        $('.pop-box').hide();
                        $('.pop-game-count').hide();
                        $('#background').find('.animated').removeClass('paused');
                        gameOverConfirm = false;
                        $('#person').addClass('run');
                        $('#person').addClass('shield');
                        boxMovefun(0);
                        invincible = true;
                        tick();
                        setTimeout(function () {
                            $('#person').removeClass('shield');
                            invincible = false;
                        },3000);
                    }
                    gameStartNum --;
                    switch (gameStartNum) {
                        case 3:
                            $('.pop-game-count').find('img').attr('src','images/game_count_three_img.png');
                            break;
                        case 2:
                            $('.pop-game-count').find('img').attr('src','images/game_count_two_img.png');
                            break;
                        case 1:
                            $('.pop-game-count').find('img').attr('src','images/game_count_one_img.png');
                            break;
                        case 0:
                            $('.pop-game-count').find('img').attr('src','images/game_count_go_img.png');
                            break;
                    }
                },1000);
            });

            $('.game-replay-btn-big').bind('touchend',function (e) {
                location.reload();
            });

            $('.game-replay-btn').bind('touchend',function (e) {
                location.reload();
            });

            $('.my-gift-btn').bind('touchend',function (e) {
                window.location.href="gift.html";
            });

            $('.my-rank-btn').bind('touchend',function (e) {
                window.location.href="rank.html";
            });

            let buffItemList = ['cp','cbp','ca-vd','yg'];
            let goldID = 0;
            let personTop = 0;
            let personLeft = 0;
            let hasShield = false;
            let hasMagnetic = false;
            let hasCaVd = false;
            let hasYg = false;
            let redbagConfirm = false; //红包判断
            let lockConfirm = true; //福锁判断
            let invincible = false; //无敌状态
            let fps = 60, now, then = Date.now(), interval = 1000 / fps, delta, frame, forTime = 0, forTime1 = 0, gameTime = 0, up = 0, g = 18, nowTop = 0, groundTop = 0, speed = 1, gameStartNum = 3, gameStartRound, gameOverConfirm = false, roundBoxNum = 0, roundMoveSpeed = 20, roundBoxArr = ['1','2','3','4','5'], itemHitTestStartObj, jumpLevel = 0, startG = 0, jumpNum = 0,
                //得到积分数量
                score = 0,
                //得到福锁数量
                lockNum = 0,
                //得到红包数量
                redbagNum = 0,
                //得到金币数量
                goldNum = 0;

            $('.game-start-btn').bind('touchend',function (e) {
                $('#gameRule').hide();
                $('.pop-game-count').show();
                gameStart();

                // 即将出现福锁弹幕
                setTimeout(function (e) {
                    $('#lockInfo').show();
                    setTimeout(function () {
                        $('#lockInfo').hide();
                    },8000);
                },5000);

                // 即将出现红包弹幕
                setTimeout(function (e) {
                    $('#redInfo').show();
                    setTimeout(function () {
                        $('#redInfo').hide();
                    },8000);
                },7000);
            });

            $(document).ready(function(){
                $('.pop-bg').addClass('show');
                $('#gameRule').show();
                //gameStart();
            });

            function boxMovefun(num) {
                if (gameOverConfirm) return;
                $('#'+num).addClass('animated slideOutLeft2');
                $('#'+num).css('animation-duration',roundMoveSpeed+'s');
            }

            function addBox(num) {
                if (gameOverConfirm) return;
                let newArr = shuffle(roundBoxArr);
                let newList = '';
                let randomChunkNum = Math.ceil(Math.random()*4);
                for (let i=1;i<=randomChunkNum;i++){
                    let chunkItemCheck = Math.floor(Math.random()*3);
                    let randomChunk = Math.round(Math.random()*1)+3;
                    let chunkList = '';
                    // 平台上出现红包
                    if (redbagConfirm) {
                        chunkList += '<div class="game-item redbag"></div>'
                        for (let j=0;j<randomChunk;j++){
                            chunkList += '<div class="game-icon-chunk"></div>'
                        }
                        $('.game-redbag-tips').hide();
                        setTimeout(function (){$('.game-redbag-tips').show();},2000);
                        redbagConfirm = false;
                    }
                    // 平台上出现福锁
                    else if (lockConfirm) {
                        chunkList += '<div class="game-item lock"></div>'
                        for (let j=0;j<randomChunk;j++){
                            chunkList += '<div class="game-icon-chunk"></div>'
                        }
                        $('.game-lock-tips').hide();
                        setTimeout(function (){$('.game-lock-tips').show();},2000);
                        lockConfirm = false;
                    }
                    else if (chunkItemCheck == 0) {
                        let randomNum = Math.floor(Math.random()*4);
                        chunkList += '<div class="game-item buff '+ buffItemList[randomNum] +'"></div>'
                        for (let j=0;j<randomChunk;j++){
                            chunkList += '<div class="game-icon-chunk"></div>'
                        }
                    }else{
                        for (let j=0;j<randomChunk;j++){
                            chunkList += '<div class="game-icon-chunk"><div class="game-item gold"></div></div>'
                        }
                    }
                    newList += '<div class="game-chunk-box flex" style="left: '+ ((i*20)+Math.ceil(Math.random()*10)) +'%;">'+ chunkList +'</div>';
                }
                for (let i=0;i<newArr.length;i++){
                    switch (newArr[i]) {
                        case '1':
                            newList += '<div class="game-move-round-box-area area1 flex"><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div><div class="game-item gold" style="left: 4rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round"> <div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div> <div class="game-item wall deadly" style="left: 4rem"></div><div class="game-item gold" style="left: 5rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round empty"></div></div>';
                            break;
                        case '2':
                            newList += '<div class="game-move-round-box-area area2 flex"><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item flower deadly" style="left: 3rem"></div><div class="game-item gold" style="left: 4rem"></div><div class="game-item gold" style="left: 5rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round empty"></div></div>';
                            break;
                        case '3':
                            newList += '<div class="game-move-round-box-area area3 flex"><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div><div class="game-item tortoise deadly" style="left: 4rem"></div><div class="game-item gold" style="left: 5rem"></div><div class="game-item gold" style="left: 6rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round empty"></div></div>';
                            break;
                        case '4':
                            newList += '<div class="game-move-round-box-area area4 flex"><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item bang deadly" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div><div class="game-item gold" style="left: 4rem"></div><div class="game-item gold" style="left: 5rem"></div><div class="game-item gold" style="left: 6rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round"><div class="game-item-box flex"><div class="game-item wall deadly" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round empty"></div></div>';
                            break;
                        case '5':
                            newList += '<div class="game-move-round-box-area area5 flex"><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div><div class="game-item gold" style="left: 3rem"></div><div class="game-item gold" style="left: 4rem"></div><div class="game-item gold" style="left: 5rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round"><div class="game-item-box flex"><div class="game-item gold" style="left: 1rem"></div><div class="game-item gold" style="left: 2rem"></div>\<div class="game-item gold" style="left: 3rem"></div><div class="game-item gold" style="left: 4rem"></div><div class="game-item gold" style="left: 5rem"></div><div class="game-item gold" style="left: 6rem"></div></div><div class="game-move-meadow"></div></div><div class="game-move-round empty"></div></div>';
                            break;
                    }
                }
                $('.game-move-box').append('<div class="game-move-round-box flex long" style="-webkit-animation-duration:'+ roundMoveSpeed +'s; animation-duration:'+ roundMoveSpeed +'s;" id="'+ num +'">'+ newList +'</div>');
            }

            function gameStart() {
                document.body.addEventListener('touchstart',touch, {passive: false});
                document.body.addEventListener('touchend',touch, {passive: false});
                document.body.addEventListener('touchmove',touch, {passive: false});
                nowTop = $(window).height() - $('#initial').find('.game-move-round').offset().top;


                $('.pop-bg').addClass('show');
                $('.pop-game-count').show();
                gameStartRound = setInterval(function () {
                    if (gameStartNum == 0){
                        $('.pop-bg').removeClass('show');
                        $('.pop-game-count').hide();
                        clearInterval(gameStartRound);
                        $('#background').find('.animated').removeClass('paused');
                        $('#person').addClass('run');
                        setTimeout(function () {
                            boxMovefun(roundBoxNum);
                            setTimeout(function (){
                                if (gameOverConfirm) return;
                                window.cancelAnimationFrame(frame);
                                gameOverConfirm = true;
                                clearInterval(itemHitTestStartObj);
                                $('#background').find('.animated').addClass('paused');
                                $('.pop-bg').addClass('show');
                                $('.pop-jump-tips').show();
                                $('#person').removeClass('run');
                            },200);
                        },3000);
                        tick();
                    }
                    gameStartNum --;
                    switch (gameStartNum) {
                        case 3:
                            $('.pop-game-count').find('img').attr('src','images/game_count_three_img.png');
                            break;
                        case 2:
                            $('.pop-game-count').find('img').attr('src','images/game_count_two_img.png');
                            break;
                        case 1:
                            $('.pop-game-count').find('img').attr('src','images/game_count_one_img.png');
                            break;
                        case 0:
                            $('.pop-game-count').find('img').attr('src','images/game_count_go_img.png');
                            break;
                    }
                },1000);
            }

            function gameScoreShow(score,lock,redbag,gold) {
                $('#lockShow').find('span').html(lock);
                $('#scoreShow').find('span').html(score);
                $('#redbagShow').find('span').html(redbag);
                $('#goldShow').find('span').html(gold);
            }

            function gameRound() {
                forTime++;
                forTime1++;
                if (forTime%10 == 0) {score ++;}
                if (forTime%60 == 0) {gameTime++;}

                if ($('#'+roundBoxNum).offset().left < $('#'+roundBoxNum).width()/2*-1){
                    roundBoxNum ++;
                    addBox(roundBoxNum);
                }
                if ($('.game-move-round-box').length >= 3 && $('#'+(roundBoxNum-1)).offset().left <= ($('#'+(roundBoxNum-1)).width()*-1)+$('.empty').width()){
                    $('#'+(roundBoxNum-1)).remove();
                    roundMoveSpeed --;
                    if (roundMoveSpeed <= 3) roundMoveSpeed = 3;
                    boxMovefun(roundBoxNum);
                    newList = '';
                }

                if (hasCaVd || hasYg) {
                    groundTop = $(window).height() - $(window).height()/3;
                    nowTop = groundTop;
                } else {
                    for (let i=0;i<$('.game-move-round').length;i++){
                        if ($('.game-move-round').eq(i).offset().left < $('#person').offset().left + $('#person').width() - 20){
                            if (jumpLevel > 0 && $('.game-move-round').eq(i).offset().top + 20 <= $('#person').offset().top + $('#person').height() && $('.game-move-round').eq(i).hasClass('empty')){
                                groundTop = $(window).height()*-1;
                                nowTop = groundTop;
                            }else{
                                groundTop = $(window).height() - $('.game-move-round').eq(i).offset().top;
                                nowTop = groundTop;
                            }
                        }
                    }
                }
                for (let i=0;i<$('.game-item').length;i++){
                    //if ($('.game-item').eq(i).hasClass('testing')) continue;
                    if ($('.game-item').eq(i).offset().left < $(window).width()/2 && $('.game-item').eq(i).offset().left + $('.game-item').eq(i).width() > 0){
                        //$('.game-item').eq(i).addClass('testing');
                        //itemMove($('.game-item').eq(i),new Date().getTime());
                        if (hitTestObject($('.game-item').eq(i), $('#person'))) {
                            hitObjectFun($('.game-item').eq(i));
                        }
                    }
                    if ($('.game-item').eq(i).offset().left + $('.game-item').width() < 0){
                        $('.game-item').eq(i).remove();
                    }
                }
                if (hasMagnetic || hasYg) {
                    for (let i=0;i<$('.gold').length;i++){
                        if ($('.gold').eq(i).offset().left < $(window).width() && $('.gold').eq(i).offset().left+$('.gold').width() > 0) {
                            let goldTop = $('.gold').eq(i).offset().top;
                            let goldLeft = $('.gold').eq(i).offset().left;
                            personTop = $('#person').offset().top;
                            personLeft = $('#person').offset().left;
                            $('.page').append('<div class="animate-gold" id="gold'+ goldID +'" style="left:'+ goldLeft +'px; top:'+ goldTop +'px;"></div>');
                            $('#gold'+goldID).animate({
                                left: personLeft+'px',
                                top: personTop+'px',
                            },{
                                duration: 200,
                                easing: 'linear',
                                complete: function () {
                                    soundGold.play();
                                    $(this).remove();
                                }
                            })
                            $('.gold').eq(i).remove();
                            goldNum ++;
                            score += 10;
                            goldID++;
                        }
                    }
                }
                if ($('#person').offset().top >= $(window).height() && !invincible){
                    gameOver();
                }
                personJump();
                gameScoreShow(score,lockNum,redbagNum,goldNum);
            }

            let soundGold = new Howl({src: ['media/gold.mp3']});
            let soundRocket = new Howl({src: ['media/xiu.mp3']});
            let soundJumpLevelOne = new Howl({src: ['media/dio.mp3']});
            let soundJumpLevelTwo = new Howl({src: ['media/dou.mp3']});
            let soundFailed = new Howl({src: ['media/failed.mp3']});
            let soundRocketRound = new Howl({src: ['media/rocket.mp3']});
            function hitObjectFun(item) {
                isHit = false;
                setTimeout(function () {isHit = true;},500);
                //console.log(item.attr('id'));
                item.remove();
                if (item.hasClass('gold')) {
                    //soundPlay('gold');
                    soundGold.play();
                    goldNum ++;
                    score += 10;
                }
                // 吸铁石的功能，触碰到之后，可以吸取沿路的金币，+30分
                if (item.hasClass('cp')) {
                    $('#person').addClass('shield');
                    hasShield = true;
                    score += 30;
                }
                // 保护盔，之后一次碰到障碍物无效，+30分
                if (item.hasClass('cbp')) {
                    hasMagnetic = true;
                    setTimeout(function () {hasMagnetic = false;},5000);
                    score += 30;
                }
                // 无障碍加速3秒钟，+30分
                if (item.hasClass('ca-vd')) {
                    soundRocket.play();
                    soundRocketRound.play();
                    hasCaVd = true;
                    $('#person').addClass('ca-vd');
                    setTimeout(function () {
                        $('#person').removeClass('ca-vd');
                        soundRocketRound.pause();
                        hasCaVd = false;
                        invincible = true;
                        setTimeout(function () {
                            invincible = false;
                        },3000);
                    },3000);
                    score += 30;
                }
                // 无障碍加速5秒钟，并且可以吸取沿路金币，+50分
                if (item.hasClass('yg')) {
                    soundRocket.play();
                    soundRocketRound.play();
                    hasYg = true;
                    $('#person').addClass('yg');
                    setTimeout(function () {
                        $('#person').removeClass('yg');
                        hasYg = false;
                        invincible = true;
                        setTimeout(function () {
                            invincible = false;
                        },3000);
                    },5000);
                    score += 30;
                }
                if (item.hasClass('redbag')) {
                    $('#tipsRed').show();
                    setTimeout(function () {$('#tipsRed').hide();},1000);
                    redbagNum ++;
                }
                if (item.hasClass('lock')) {
                    $('#tipsLock').show();
                    setTimeout(function () {$('#tipsLock').hide();},1000);
                    lockNum ++;
                }
                if (item.hasClass('deadly') && !invincible) {
                    if (hasShield) {
                        $('#person').removeClass('shield');
                        hasShield = false;
                        return;
                    }
                    gameOver();
                }
                $('.scoreboard').html(score);
            }

            function gameOver() {
                soundFailed.play();
                window.cancelAnimationFrame(frame);
                gameOverConfirm = true;
                clearInterval(itemHitTestStartObj);
                $('#background').find('.animated').addClass('paused');
                $('.pop-bg').addClass('show');
                $('.pop-box-game-over').show();
                $('#person').removeClass('run');
                setTimeout(function () {
                    $('.pop-box-game-over').hide();
                    $('#popGoldShow').html(goldNum);
                    $('#popLockShow').html(lockNum);
                    $('#popRedbagShow').html(redbagNum);
                    $('#popScoreShow').html(score);
                    $('#gameOver').show();
                },2000);

            }

            function hitTestObject(item,hitObj){
                if(item == null || hitObj == null) return;
                let itemTop = item.offset().top,
                    itemFoot = item.offset().top + parseInt(item.height()),
                    itemLeft = item.offset().left,
                    itemRight = item.offset().left + parseInt(item.width());
                let hitTop = hitObj.offset().top,
                    hitFoot = hitObj.offset().top + parseInt(hitObj.height()),
                    hitLeft = hitObj.offset().left,
                    hitRight = hitObj.offset().left + parseInt(hitObj.width());
                if(itemFoot > hitTop && itemRight > hitLeft+20 && itemTop < hitFoot && itemLeft < hitRight-20){
                    return true;
                }
            }

            function personJump() {
                startG--;
                up += startG*speed;
                if (startG <= -2) {
                    jumpLevel = 1;

                    for (let i=0;i<$('.game-chunk-box').length;i++){
                        if ($('.game-chunk-box').eq(i).offset().left < $('#person').offset().left + $('#person').width() - 20 && $('.game-chunk-box').eq(i).offset().left+ $('.game-chunk-box').eq(i).width() > $('#person').offset().left && $('.game-chunk-box').eq(i).offset().top + 20 >= $('#person').offset().top + $('#person').height()){
                            groundTop = $(window).height() - $('.game-chunk-box').eq(i).offset().top;
                            nowTop = groundTop;
                        }
                    }

                    $('.person').removeClass('jump two-jump');
                    $('.person').addClass('down');
                }
                if (up <= groundTop) {
                    up = groundTop;
                    startG = 0;
                    jumpNum = 0;
                    jumpLevel = 0;
                    $('.person').removeClass('jump down two-jump');
                }
                $('.person').css({'bottom': up+'px'});
            }

            $('#jump').bind('touchstart',function () {
                if (hasCaVd || hasYg) return;
                //console.log(jumpLevel);
                if (jumpNum < 2) {
                    if (jumpLevel == 1) {
                        jumpNum = 2;
                    }else{
                        jumpNum ++;
                    }
                    jumpLevel ++;
                    startG = g;
                    if (jumpLevel == 1) {
                        soundJumpLevelOne.play();
                        $('.person').addClass('jump');
                    }
                    if (jumpLevel == 2) {
                        soundJumpLevelTwo.play();
                        $('.person').addClass('two-jump');
                    }
                }
            });

            function shuffle(arr) {
                let len = arr.length;
                for (let i = 0; i < len - 1; i++) {
                    let index = parseInt(Math.random() * (len - i));
                    let temp = arr[index];
                    arr[index] = arr[len - i - 1];
                    arr[len - i - 1] = temp;
                }
                return arr;
            }

            function tick() {
                window.cancelAnimationFrame(frame);
                frame = window.requestAnimationFrame(tick);
                now = Date.now();
                delta = now - then;
                if (delta > interval) {
                    then = now - (delta % interval);
                    gameRound();
                }
            }

            function touch (event) {
                var event = event || window.event;
                event.preventDefault();
            }
        </script>
	</body>
</html>
